<template>
	<uni-nav-bar fixed="true" backgroundColor="#f8f8f8" statusBar="true" border="false" left-icon="left" title="选择线路" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<view class="vt50 tc" v-if="List.length == 0">
			<view>您尚未添加任何线路</view>
			<text class="uni-primary color-blue" @tap="navgetTo('pages/my/create_root','','')">新增线路>></text>
		</view>
		<view class="mb30 mt30 tc" v-if="List.length > 0">
			<text class="uni-primary color-blue" @tap="navgetTo('pages/my/create_root','','')">新增线路>></text>
		</view>
		<view class="uni-padding-wrap pt30">
			<view class="foot-list uni-flex uni-row" v-if="List.length>0">
				<view class="foot-card m5" v-for="item in List" @tap="navgetTo('pages/my/root_detail',item.id,'')">
					<img class="foot-avatar" :src="item.coverUrl" mode="aspectFill"></img>
					<view class="p010">
						<view class="w100">
							<text class="sign-num">{{item.linesTitle}}</text>
							<view class="sign-price-list"><uni-icons type="location-filled" size="12" color="#37b64a"></uni-icons>{{item.linesCityDesc}}</view>
						</view>
						<view class="sign-time uni-flex">
							<view class="is-flex">难度&nbsp;&nbsp;<uni-rate size="12" :readonly="true" :max="maxStar" v-model="item.linesStar" /></view>
							<view>组队{{item.groupNum}}次</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载提示 -->
			 <view class="tc mb100">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		components: {
			
		},
		data() {
			return {
				loadMoreText:"",
				List:[],
				sourceType: '', // 来源页面类型，'schdule'表示从行程点进来，'my'表示从我的进入
				param: {
					page: 1, //当前页
					limit: 10, //每页显示记录数
					token:'',
				},
			}
		},
		computed: {
			
		},
		watch: {

		},
		onPullDownRefresh() {
			// 下拉刷新时触发的逻辑
			this.param.page = 1;
			this.getPageList('onPullDownRefresh');
		},
		onReachBottom() {
		    // 触发加载更多逻辑
		    this.param.page = (this.param.page + 1);
			this.getPageList('onReachBottom');
		},
		onReady() {
			// 获取可滚动区域的高度：视口高度 - tabbar切换卡高度就是剩余的内容可滚动的。
			//如果你使用取消了原生导航栏，记着把你自定义导航栏的高度也减掉哦
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})
		},
		onLoad(option) {
			// 接收来源页面信息，如果有参数传入
			if (option && option.source) {
				this.sourceType = option.source;
			}
			this.getPageList('onPullDownRefresh');
		},
		methods: {
			back(){
				// 根据来源页面决定返回逻辑
				if (this.sourceType === 'schdule') {
					// 从行程点进来，返回行程列表页
					uni.redirectTo({
						url: '/pages/schdule/schdule'
					});
				} else if (this.sourceType === 'my') {
					// 从我的进入，返回我的页面
					uni.redirectTo({
						url: '/pages/my/my'
					});
				} else {
					// 默认返回上一页
					uni.navigateBack();
				}
			},
			checkIsLogin() {
				
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			// 城市选择器
			bindRegionChange: function(e) {
				this.region = e.detail.value;
			},
			// 搜索队伍
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			// 获取分页列表
			getPageList(type) {
				let _this = this;
				_this.param.token = storageUtil.getUserData("token");
				let requestData = {
					params: {
						page: _this.param.page, //当前页
						size: _this.param.limit, //每页显示记录数
					}
				}
				api.getLinesList(requestData).then(res => {
					if (res.code === 0) {
						if (res.data.length > 0) {
							let pagelist = res.data;
							if (type == "onReachBottom") {
								_this.List = _this.List.concat(pagelist)
							} else {
								_this.List = pagelist;
							}
						}else{
							if(type == "onPullDownRefresh"){
								_this.List = [];
							}else if(type == "onReachBottom"){
								this.loadMoreText = "--到底啦--"
							}
						}
					} else {}
				// 结束下拉刷新动画
				uni.stopPullDownRefresh();
				}).catch(function(){
					// 结束下拉刷新动画
					uni.stopPullDownRefresh();
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		background-color: #ffffff;
	}
	.h100{
		height: 100vh;
	}
	
	.mt49{
		margin-top: 49vh;
	}

	.index-swiper {
		width: 100%;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.is-flex {
		display: flex;
		align-items: center;
	}

	.bottom-wrap {
		position: relative;
		top: -60rpx;
	}

	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.flex-item {
		width: 50%;
		text-align: left;
		line-height: 80rpx;
	}

	.search_btn {
		background-color: $uni-text-color-green;
		font-size: 14px;
		border: none;
		color: #fff;

	}

	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: sticky;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 999;
		padding: 0 15px;
		margin-bottom: 30rpx;
	}

	.sticky text {
		color: #000;
		font-weight: bold;
		margin-right: 30rpx;
	}
	.foot-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 2%;
		box-sizing: border-box;
	}

	.foot-card {
		width: 47%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 30rpx;
		box-shadow: 2rpx 2rpx 10rpx $uni-text-color-grey8;
		box-sizing: border-box;
	}
	
	.foot-avatar {
		width: 100%;
		height: 425rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.foot-avatar {
		width: 100%;
		height: 425rpx;;
		object-fit: cover;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.foot-name {
		font-size: 28rpx;
		color: #000;
	}

	.sign-num {
		font-size: 26rpx;
		color: $uni-text-color-grey8;
		text-align: justify;
	}

	.sign-price-list {
		font-size: 24rpx;
		color: $uni-text-color-grey8;
		flex: 0 0 auto;
		width: auto;
		float: right;
	}

	.sign-price {
		color: $uni-text-color-red;
	}

	.sign-time {
		position: absolute;
		top: 10rpx;
		width: 98%;
		left: 0;
		right: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.6);
		height: 45rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 20rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
</style>